<template>
  <div>
    <van-nav-bar
      fixed
      title="Vue-Vuex"
      left-text
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <div style="margin-top:70px">
      <h1>{{arr}}</h1>
      <h1>{{name}}</h1>
    </div>

    <div class="store">
      <input type="button" value="加" @click="addone" />
      <input type="button" value="减" @click="addtwo" />
      <br />
      <br />
      <input type="text" v-model="$store.state.count" />
      <h1>当前数量为{{$store.getters.optCount}}</h1>
    </div>
    <!-- watch监听 -->
    <div style="margin-top:22px">
      <van-cell-group>
        <van-field v-model="fullname" placeholder="请输入用户名" />
      </van-cell-group>
      <span>{{tip}}</span>
    </div>

    
  </div>
</template>
<script>
export default {
  data() {
    return {
      fullname: "",
      tip: ""
    };
  },

  watch: {
    fullname: function(val) {
      // 调用接口验证合法性
      this.checkName(val);
      // 提交提示信息
      this.tip = "在验证";
    }
  },
  methods: {
    checkName(fullname) {
      // 使用定时任务的方式接口调用
      var that = this;
      setTimeout(function() {
        //  接口调用
        if (fullname == "admin") {
          that.tip = "用户名存在";
        } else {
          that.tip = "用户名可以使用";
        }
      },3000);
    },
    onClickLeft() {},
    onClickRight() {},
    getElement() {
      console.log(this.$refs.myref.innerText);
    },
    // 加
    addone() {
      this.$store.commit("add");
    },
    // 减
    addtwo() {
      if (this.$store.state.count <= 0) {
        return false;
      } else {
        this.$store.commit("payadd");
      }
    }
  },
  computed: {
    arr() {
      return this.$store.state.arr[0];
    },
    name() {
      return this.$store.state.msg;
    }
  },
  mounted() {
    this.$store.commit("setarr"), this.$store.commit("change", "huqiang");
  }
};
</script>
<style lang="less" scoped>
</style>